<template>
	<view class="contain">
		    <view class="top-content"></view>
         <view class='topradio'>
	
		<view class="childborder">
      <u-form :model="form" ref="uForm" :error-type="errorType">
        <view class>
          <u-form-item  class="selectone" label-width="200"   style="padding:0rpx 0rpx 20rpx 0rpx;" label="旧密码" prop="oldpasword">
            <u-input type="text"  style="right:32rpx;margin-right:40rpx" placeholder="请输入旧密码" v-model="form.oldpasword" />
          </u-form-item>
          <u-form-item  class="selectone1" label-width="200"  label="新密码" prop="newpasword">
            <u-input  :type="type"  :password-icon="passwordIcon" style="right:32rpx" placeholder="请输入新密码" v-model="form.newpasword" />
          </u-form-item>
          <u-form-item  class="selectone1" label-width="200"  style="padding:0rpx 0rpx -20rpx 0rpx;" label="确认密码" prop="newpasword1">
            <u-input  :type="type"  :password-icon="passwordIcon" style="right:32rpx" placeholder="请再次输入新密码" v-model="form.newpasword1" />
          </u-form-item>
        </view>
      </u-form>
    </view>
    <view class="">
    	<u-button @click='returnHandle()' style="margin-top:50rpx" class="btn" type="primary" :ripple="true" ripple-bg-color="#32afff">确认修改
    	</u-button>
    	<!-- <u-button @click='submit()' style="margin-top:20rpx"  class="btn" type="primary" :ripple="true" ripple-bg-color="#32afff">取消修改
    	</u-button> -->
      <template>
</template>
    </view>
	</view>
	</view>
</template>

<script>
import { updateUserPwd } from "@/api/index.js";

export default {
  data() {
    return {
      form: {},
      errorType: ["message"],
      passwordIcon: true,
      type: "password",
      rules: {
        oldpasword: [
          {
            required: true,
            message: "旧密码不能为空",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"]
          }
        ],
        newpasword: [
          {
            required: true,
            message: "新密码不能为空",
            
            trigger: ["change", "blur"]
          },
          {
            pattern: /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{8,16}$/,
            transform(value) {
              return String(value);
            },
            message: "密码必须由大小写字母、数字、特殊符号的8-16位组成",
             trigger: ["change", "blur"]
          }
        ],
        newpasword1: [
          {
            required: true,
            message: "请再次输入新密码",
            trigger: ["change", "blur"]
          },
          {
            validator: (rule, value, callback) => {
              const tf=false
              if(this.form.newpasword== this.form.newpasword1){
               return true
              }else {
               return false
              }
			},
            message: "请输入与新密码相同的密码",
             trigger: ["blur"]
          }
        ]
      }
    };
  },
  onLoad: function() {},
  onShow() {
    this.form={}
  },
  onPullDownRefresh() {},
  methods: {
    returnHandle() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
           updateUserPwd(this.form.oldpasword, this.form.newpasword).then(
             response => {
                  uni.showLoading({
        title: "修改成功，请重新登录。"
      });
        uni.reLaunch({
                  url: "/pages/login/login"
                });
                 uni.removeStorageSync("username");
                 uni.removeStorageSync("password");
                 uni.removeStorageSync("rember");
                 uni.removeStorageSync("token");
                 uni.removeStorageSync("nickName");
                 uni.removeStorageSync("current");
             }
           )
        } else {
          console.log("验证失败");
        }
      });
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  }
};
</script>
<style lang="scss" scoped>
.innerContain {
  height: 100%;
  position: relative;
  background-color: white;
}
.top-content {
  height: 160rpx;
  background: linear-gradient(to left, #1040be, #026dff);
}
.topradio {
  height: calc(100% - 200rpx);
  overflow-y: auto;
  position: absolute;
  background-color: white;
  // padding: 30rpx;
  width: 100%;
  top: 50rpx;
  border-radius: 40rpx 40rpx 0 0;
  // position: absolute;
  // width: 100%;
  // top: 0rpx;
  // left: 0rpx;
  // background-color: white;
  // border-radius: 40rpx 40rpx 0 0;
}
.top {
  padding: 16rpx;
  /* box-shadow: 20px -77px 0px 19px #c6c6ca; */
  box-shadow: 4rpx 4rpx 20rpx #e5e1e1;
  margin: 24rpx;
  border-radius: 32rpx;
}
.childborder {
  padding: 34rpx 34rpx 16rpx 34rpx;
  margin: 24rpx;

  box-shadow: 0px 6px 33px #e5e1e1;
  border-radius: 32rpx;
}
.trueorfalse {
  margin-right: 20rpx;
  top: 6rpx;
}
.red1 {
  padding: 25rpx 0rpx;
}
.footer {
  background-color: transparent;
}
.btn {
  background: linear-gradient(-34deg, #1040be, #026dff);
  width: 544rpx;
  height: 91rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
  border-radius: 46rpx;
}
/deep/ .u-form-item--left__content__label {
  font-size: 33rpx;
}
/deep/ .u-input__input {
  // color:
}

.co {
  color: red;
}
/deep/ .u-input__input {
  text-align: right;
}
/deep/ .u-form-item__message {
  text-align: right;
  margin-right: 32rpx;
}
.borderbottom:after {
  border-bottom-width: 0px !important;
}
/deep/ .input1 > .u-input__input > .uni-input-wrapper > .uni-input-input {
  display: none !important;
  //  color:red !important
}
/deep/ .selectone:after {
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
}
.selectone1:after {
  border-top-width: 1px !important;
  border-bottom-width: 0px !important;
}
</style>